<template>
  <div ref="hollowPie"></div>
</template>

<script>
import resize from '@/mixins/resize'
import * as echarts from 'echarts'
import { countAccount } from '@/api/config'

const colorLost = ['#4FD8FF', '#C15FFF', '#FF5F55', '#FFC935', '#767BFB', 'rgb(248,70,102)']
export default {
  name: 'hollowPie',
  mixins: [resize],
  data () {
    return {
      memberAudit: { 'WAIT': 0, 'PASS': 0, 'NOTPASS': 0 } // 会员审核概况
    }
  },
  async mounted () {
    await this.getCount()
    this.$nextTick(() => {
      this.initEchart()
    })
  },
  methods: {
    // 会员审核概况
    async getCount () {
      let res = await countAccount('ROLE_VENDOR')
      res.data.map(t => {
        this.memberAudit[t.key] = t.value
      })
    },
    initEchart () {
      this.myChart = echarts.init(this.$refs.hollowPie)
      this.myChart.setOption(
        {
          color: colorLost,
          title: [
            {
              text: '',
              textStyle: {
                color: '#B4B4B4',
                fontSize: 25
              },
              top: 'center',
              left: 'center'
            }
          ],
          tooltip: {
            trigger: 'item',
            formatter: params => {
              return params.marker + ' ' + params.name + '：' + params.value + ' (' + params.percent + '%)'
            }
          },
          legend: {
            show: true,
            left: '15',
            top: 0,
            type: 'scroll',
            itemWidth: 18,
            itemHeight: 11,
            data: ['待审核', '通过', '拒绝'],
            textStyle: {
              color: '#B4B4B4'
            }
          },
          series: [
            {
              name: '类型',
              type: 'pie',
              icon: 'circle',
              radius: ['35%', '55%'],
              center: ['50%', '50%'],
              itemStyle: {
                // normal: {
                //   borderColor: '#fff',
                //   borderWidth: 1
                // }
              },
              data: [
                {
                  name: '待审核',
                  value: this.memberAudit['WAIT']
                },
                {
                  name: '通过',
                  value: this.memberAudit['PASS']
                },
                {
                  name: '拒绝',
                  value: this.memberAudit['NOTPASS']
                }
              ],
              label: {},
              labelLine: {
                normal: {
                  show: true
                }
              }
            }
          ]
        },
        true
      )
    }
  }
}
</script>
